<template>
	<div class="base-table" 
		@mousedown="handleMouseDown"
		@dblclick="handleDblClick">
		<table>
			<thead>
				<tr>
					<th>第一列</th>
					<th>第二列</th>
					<th>第三列</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>{{ data.ddr.transform.x }}</td>
					<td>{{ data.ddr.transform.y }}</td>
					<td></td>
				</tr>
				<tr>
					<td>{{ data.ddr.transform.width }}</td>
					<td>{{ data.ddr.transform.height }}</td>
					<td></td>
				</tr>
				<tr>
					<td>{{ data.point.name }}</td>
					<td>{{ data.point.value }}</td>
					<td>{{ data.point.unit }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	export default {
		name: 'BaseTable',
		props: {
			data: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {}
		},
		methods: {
			handleMouseDown(evt) {
				if(this.data.ddr.draggable) {
					return
				}
				console.log(evt)
				
			},
			handleDblClick() {
				this.$emit('dblclick', this.data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.base-table {
		height: 100%;
		
		table {
			width: 100%;
			height: 100%;
			border-collapse: collapse;
			
			th,td {
				border: 1px solid lightblue;
				text-align: center;
			}
			
		}
		
	}
</style>